<template>
  <div class="preview clearfix">
    <div class="order-pre-top clearfix">
      <div class="preview-block">
        <el-card class="order-waiting-num" shadow="hover">
          <div slot="header" class="clearfix">
            <span>待处理订单</span>
          </div>
          <div class="order-num">
            <div class="order-num-prev order-prev-left">
              <p>2</p>
              <span>新订单</span>
            </div>
            <div class="order-num-prev order-prev-right">
              <p>1</p>
              <span>取消订单</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="preview-block">
        <el-card class="order-all" shadow="hover">
          <div slot="header" class="clearfix">
            <span>订单总览</span>
          </div>
          <div class="order-num">
            <div class="order-num-prev order-prev-left">
              <p>2</p>
              <span>总订单</span>
            </div>
            <div class="order-num-prev order-prev-right">
              <p>1</p>
              <span>总营业额</span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="order-pre-last preview-block">
      <el-card class="order-today" shadow="hover">
        <div slot="header" class="clearfix">
          <span>今日总览</span>
        </div>
        <div class="order-num">
          <div class="order-num-prev order-prev-left">
            <p>12</p>
            <span>下单数量</span>
          </div>
          <div class="order-num-prev order-prev-right">
            <p>¥499</p>
            <span>目前营业额</span>
          </div>
        </div>
      </el-card>
    </div>
    <div class="favor order-pre-last">
      <el-card class="order-today" shadow="hover">
        <div slot="header" class="clearfix">
          <span>热销商品</span>
        </div>
        <div class="order-num favor-con">
          <el-row>
            <el-col :span="8">
              <el-card>
                <img src="@/assets/images/food.png" class="image">
                <div class="clearfix">
                  <p class="foodName">好吃的汉堡</p>
                  <p class="sellNum">月销量: 59</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card>
                <img src="@/assets/images/food.png" class="image">
                <div class="clearfix">
                  <p class="foodName">好吃的汉堡</p>
                  <p class="sellNum">月销量: 59</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8" class="el-col-last">
              <el-card>
                <img src="@/assets/images/food.png" class="image">
                <div class="clearfix">
                  <p class="foodName">好吃的汉堡</p>
                  <p class="sellNum">月销量: 59</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-card>
                <img src="@/assets/images/food.png" class="image">
                <div class="clearfix">
                  <p class="foodName">好吃的汉堡</p>
                  <p class="sellNum">月销量: 59</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card>
                <img src="@/assets/images/food.png" class="image">
                <div class="clearfix">
                  <p class="foodName">好吃的汉堡</p>
                  <p class="sellNum">月销量: 59</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8" class="el-col-last">
              <el-card>
                <img src="@/assets/images/food.png" class="image">
                <div class="clearfix">
                  <p class="foodName">好吃的汉堡</p>
                  <p class="sellNum">月销量: 59</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-card>
                <img src="@/assets/images/food.png" class="image">
                <div class="clearfix">
                  <p class="foodName">好吃的汉堡</p>
                  <p class="sellNum">月销量: 59</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card>
                <img src="@/assets/images/food.png" class="image">
                <div class="clearfix">
                  <p class="foodName">好吃的汉堡</p>
                  <p class="sellNum">月销量: 59</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8" class="el-col-last">
              <el-card>
                <img src="@/assets/images/food.png" class="image">
                <div class="clearfix">
                  <p class="foodName">好吃的汉堡</p>
                  <p class="sellNum">月销量: 59</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Preview'
}
</script>

<style lang="stylus" scoped>
  @import "../assets/css/base.styl"
  .preview
    width: $width
    margin: 0 auto
    .order-pre-top
      height: 160px
      padding-left 160px
      .preview-block
        width: 50%
        float: left
        padding: 10px 0 10px 10px
        box-sizing border-box
        .order-num
          padding: 0 50px 60px
          .order-num-prev
            float: left
            cursor: pointer
            p
              text-align: center
              font-size 32px
              font-weight: 600;
              font-family Consolas
              color: #F56C6C
            span
              color: #666
              font-size 14px
          .order-prev-left
            float: left
          .order-prev-right
            float: right
    .order-pre-last
      padding-left 170px
      .order-num
        padding: 0 50px 60px
        .order-num-prev
          float: left
          cursor: pointer
          p
            text-align: center
            font-size 32px
            font-weight: 600;
            font-family Consolas
            color: #F56C6C
          span
            color: #666
            font-size 14px
        .order-prev-left
          float: left
        .order-prev-right
          float: right
    .favor
      margin-top 10px
      margin-bottom 20px
      padding-left 170px
      .favor-con
        padding: 0
        .el-col
          padding-right: 10px
          margin-bottom 10px
          p
            display inline-block
            float: left
            font-size 14px
            color: #666
            margin 8px 0 0 16px
            line-height: 30px
            &:nth-of-type(2)
              margin-top 0px
              color #ccc
              font-size 12px
        .el-col-last
          padding-right 0
        img
          width: 80px
          float: left
</style>
